<!-- 就业页面 -->
<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="690px" style="padding: 20px; display: flex; justify-content: center">
        <el-card style="width: 640px; height: 85vh">
          <div style="display: flex">
            <el-avatar :size="64" :src="userStore.userInfo.avatar" />
            <div style="margin-left: 20px">
              <div style="display: flex; align-items: center">
                <div class="name">
                  {{
                    biographical
                      ? biographical.realName
                      : userStore.userInfo.realName
                  }}
                </div>
                <div>
                  <el-tag v-if="biographical" round style="margin-right: 10px">{{ calculateAge(biographical.birthDate)
                  }}岁</el-tag>
                  <el-tag v-if="biographical" round style="margin-right: 10px">{{ biographical.workYears }}</el-tag>
                  <el-tag v-if="biographical" round style="margin-right: 10px">{{ biographical.qualification }}</el-tag>
                </div>
              </div>
              <div style="display: flex; align-items: center">
                <div class="qiwang" v-if="biographical">
                  期望：{{ biographical.intendPosition }}
                </div>
                <div class="qiwang" style="margin-left: 20px" v-if="biographical">
                  {{ biographical.intendSalaryMin }}-{{
                    biographical.intendSalaryMax
                  }}元/月
                </div>
                <div :style="userStore.userInfo?.role == 1
                  ? 'margin-left: 120px'
                  : 'margin-left: 0px'
                  ">
                  <el-button v-if="userStore.userInfo?.role == 1" type="primary" :icon="Edit" @click="
                    () => {
                      router.push('/works/biographical');
                    }
                  ">编辑简历</el-button>
                  <el-button v-if="userStore.userInfo?.role == 0" type="primary" :icon="Edit" @click="
                    () => {
                      router.push('/works/job');
                    }
                  ">新增岗位</el-button>
                  <el-button v-if="userStore.userInfo?.role == 0" type="primary" @click="
                    () => {
                      router.push('/works/apply');
                    }
                  ">已收到的申请</el-button>
                </div>
              </div>
            </div>
          </div>
          <div class="filter">
            <div class="formTitle" style="color: red">岗位搜索</div>
            <div class="formTitle">
              岗位名称：
              <el-input v-model="searchForm.postName" style="width: 500px" placeholder="请输入内容检索"
                :prefix-icon="Search" />
            </div>
            <div class="formTitle">
              公司名称：
              <el-input v-model="searchForm.companyName" style="width: 500px" placeholder="请输入内容检索"
                :prefix-icon="Search" />
            </div>
            <div class="formTitle">
              工作地点：
              <!-- <elui-china-area-dht @change="onChange"></elui-china-area-dht> -->
              <elui-china-area-dht v-model="address" isall :leave="3" @change="onChange"
                style="width: 500px"></elui-china-area-dht>
            </div>
            <div class="formTitle" style="display: flex">
              <div style="min-width: 95px">学历要求：</div>
              <div>
                <el-radio-group v-model="searchForm.qualification" size="small">
                  <el-radio v-for="(item, index) in options3" :key="item.value" :label="item.label" :value="item.value"
                    :style="index > 4 ? 'margin-Top: 10px' : ''" border></el-radio>
                </el-radio-group>
              </div>
            </div>
            <div class="formTitle" style="display: flex">
              <div style="min-width: 95px">薪资要求：</div>
              <div>
                <el-radio-group v-model="radio" size="small" @change="setSalary">
                  <el-radio value="1" border>薪资不限</el-radio>
                  <el-radio value="2" border>2000元以下</el-radio>
                  <el-radio value="3" border>2000-4000元</el-radio>
                  <el-radio value="4" border>4000-6000元</el-radio>
                  <el-radio value="5" border style="margin-top: 10px">6000-10000元</el-radio>
                  <el-radio value="6" border style="margin-top: 10px">10000元以上</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div class="formTitle">
              工作经验：
              <el-select v-model="searchForm.workYears" style="width: 500px">
                <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
            <div style="display: flex; justify-content: flex-end">
              <el-button @click="reset">重置</el-button>
              <el-button type="primary" @click="search">查询</el-button>
            </div>
          </div>
        </el-card>
      </el-aside>
      <el-container>
        <el-main>
          <div v-if="userStore.userInfo?.role == 1">
            <el-switch v-model="searchForm.isApply" :active-value="1" :inactive-value="0" @change="search" />&emsp;<span
              style="font-size: 14px">仅查看已投递</span>
          </div>
          <div v-for="o in list" :key="o.id" class="works">
            <el-card class="box-card">
              <div style="display: flex; align-items: center">
                <div class="name">
                  {{ o.postName }}&emsp;
                  <span style="font-size: 16px">{{ o.salaryMin }}-{{ o.salaryMax }}元/月</span>
                </div>
                <div style="margin-left: 15px">
                  <el-tag type="info">{{ o.qualification }}</el-tag>
                  <el-tag type="info" style="margin-left: 5px">三年经验</el-tag>
                </div>
                <div style="margin-left: auto; margin-right: 20px">
                  <JobDetail :JobId="o.id" :job="o" :reload="getJobList" />
                  <el-link v-if="userStore.userInfo?.role == 1" :type="options6.find((item) => item.label == o.status)?.value
                    " :underline="false">
                    {{ o.status }}</el-link>
                  <el-link v-if="userStore.userInfo?.role == 0" type="primary" :underline="false"
                    @click="goJobEdit(o.id)">编辑</el-link>
                  <el-link v-if="userStore.userInfo?.role == 0" style="margin-left: 10px" type="primary"
                    :underline="false" @click="deleteJob(o.id)">删除</el-link>
                </div>
              </div>
              <div style="
                  margin-top: 10px;
                  color: #999999;
                  font-size: 14px;
                  padding: 20px 0;
                ">
                {{ o.companyName }}&emsp;&emsp;{{ o.workLocation }}
              </div>
              <el-divider />
              <div>
                <div style="font-weight: bold">岗位要求：</div>
                <div style="font-size: 14px; color: #999999; padding: 20px 0">
                  {{ o.postRequirements }}
                </div>
                <div>
                  <el-tag v-for="item in o.welfare.split(',')" round style="margin-right: 10px">{{ item }}</el-tag>
                </div>
              </div>
            </el-card>
          </div>
          <el-pagination style="float: right" background layout="prev, pager, next" :total="total"
            v-model:current-page="searchForm.page" :pageSize="searchForm.pageSize" @current-change="pageChange">
          </el-pagination>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { Edit, Search } from "@element-plus/icons-vue";
import { EluiChinaAreaDht } from "elui-china-area-dht";
import { useRouter } from "vue-router";
import { options4, options3, options6 } from "./Job/config";
import JobDetail from "./Components/JobDetail.vue";
import { reqGetJobList, reqGetResumeDetail, reqDelJob } from "@/api/api";
import { useUserStore } from "@/stores/userInfo";
import { calculateAge } from "@/utils/index";
import { ElMessage } from "element-plus";
const userStore = useUserStore();
const router = useRouter();
const chinaData = new EluiChinaAreaDht.ChinaArea().chinaAreaflat;
const total = ref(0);
/**查询参数 */
const searchForm = ref({
  page: 1,
  pageSize: 3,
  /**岗位名称 */
  postName: "",
  /**公司名称 */
  companyName: "",
  /**公司地址 */
  workLocation: "",
  /**学历 */
  qualification: "",
  /**薪资最小值 */
  salaryMin: 0,
  /**薪资最大值 */
  salaryMax: 0,
  /**工作经验 */
  workYears: "",
  isApply: 0,
});
const address = ref([]);
const radio = ref();
const list = ref([]);

/**当前岗位 */
const biographical = ref(null);

onMounted(() => {
  getJobList();
  getBiographical();
});

/**获取简历 */
const getBiographical = async () => {
  if (userStore.userInfo.id) {
    const res = await reqGetResumeDetail(userStore.userInfo.id);

    if (res.code == 200) {
      biographical.value = res.data;
    }
  }
};

/**切换地址 */
const onChange = (e) => {
  address.value = [];
  const t = [];
  console.log(e);
  e.forEach((element, index) => {
    if (element !== "all") address.value.push(chinaData[e[index]].value);
  });
  e.forEach((element, index) => {
    if (element !== "all") t.push(chinaData[e[index]].label);
  });
  console.log(address.value);
  searchForm.value.workLocation = t.join(",");
};
/**查询 */
const search = () => {
  console.log(searchForm.value);
  getJobList();
};

/**设置工资上限和下限 */
const setSalary = (val) => {
  console.log(val);
  switch (val) {
    case "1":
      searchForm.value.salaryMin = 0;
      searchForm.value.salaryMax = 0;
      break;
    case "2":
      searchForm.value.salaryMin = 0;
      searchForm.value.salaryMax = 2000;
      break;
    case "3":
      searchForm.value.salaryMin = 2000;
      searchForm.value.salaryMax = 4000;
      break;
    case "4":
      searchForm.value.salaryMin = 4000;
      searchForm.value.salaryMax = 6000;
      break;
    case "5":
      searchForm.value.salaryMin = 6000;
      searchForm.value.salaryMax = 10000;
      break;
    case "6":
      searchForm.value.salaryMin = 10000;
      searchForm.value.salaryMax = 0;

    default:
      break;
  }
};
/**去编辑岗位 */
const goJobEdit = (id) => {
  router.push(`works/job?id=${id}`);
};

/**获取岗位列表 */
const getJobList = async () => {
  const res = await reqGetJobList(searchForm.value);
  if (res.code === 200) {
    console.log(res.data);
    list.value = res.data.records;
    total.value = res.data.totalRow;
  }
};

/**删除岗位 */
const deleteJob = async (id) => {
  const res = await reqDelJob(id);
  if (res.code == 200) {
    ElMessage.success(res.msg);
    getJobList();
  }
};

/**页码改变 */
const pageChange = () => {
  getJobList();
};

/**重置搜索条件 */
const reset = () => {
  address.value = [];
  searchForm.value = {
    page: 1,
    pageSize: 3,
    /**岗位名称 */
    postName: "",
    /**公司名称 */
    companyName: "",
    /**公司地址 */
    workLocation: "",
    /**学历 */
    qualification: "",
    /**薪资最小值 */
    salaryMin: 0,
    /**薪资最大值 */
    salaryMax: 0,
    /**工作经验 */
    workYears: "",
    isApply: 0,
  };
  getJobList();
};
</script>

<style lang="scss" scoped>
.common-layout {
  //   background-color: #f9fafb;
}

.name {
  font-weight: bold;
  font-size: 20px;
  margin-right: 20px;
}

.qiwang {
  font-weight: bold;
}

.filter {
  font-size: 18px;

  .formTitle {
    margin: 16px 0;
  }

  :deep(.el-radio) {
    margin-right: 15px;
  }
}

.works {
  margin-bottom: 20px;
}
</style>
